<template>
    <div class="putforward">
        <div class="block">
            <el-date-picker
              v-model="value7"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions2">
            </el-date-picker>
            <button class="anniu">查询</button>
            <span>支付金额￥15,95960，支付笔数:346</span>
            <button class="up-list">导出已支付订单</button>
          </div>
          <div class="s-table">
            <table class="table" border="1">
              <thead>
                <th style=" width: 20%;">提交时间</th>
                <th style=" width: 20%;">提现金额</th>
                <th style=" width: 20%;">手续费</th>
                <th style=" width: 10%;">打款金额</th>
                <th style=" width: 15%;">状态</th>
                <th style=" width: 15%;">备注</th>
              </thead>
              <tbody class="tbody">
                <tr>
                  <td class="td1">2018-04-02</td>
                  <td class="td1">141</td>
                  <td class="td1">6,236.00</td>
                  <td class="td1">2,031.00</td>
                  <td class="td1 baten"><button style="background-color:#0ace25">未提现</button></td>
                  <td class="td1">无</td>
                </tr>
              </tbody>
            </table>
          </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeName: "first",
                pickerOptions2: {
                shortcuts: [{
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  }
                }]
              },
            };
        },
        methods: {

        }
    };
</script>
<style scoped>
    .putforward {
        margin: 22px 31px;
    }
    .putforward .block{
    margin-bottom: 30px;
    position: relative;
  }
  .putforward .anniu{
    width: 105px;height: 44px;
    border-radius: 10px;
    background-color: #36a4ff;
    border:none;
    color: #fff;
    font: 22px/44px "微软雅黑";
    margin-top: 10px;
  }
  .putforward .up-list{
    width: 120px;
    height: 44px;
    border-radius: 10px;
    background-color: #36a4ff;
    border:none;
    color: #fff;
    font: 14px/44px "微软雅黑";
    margin-top: 10px;
    position: absolute;
    right: 0;
  }
  
  .s-table {
    margin-top: 45px;
    /* padding-right: 90px;*/
  }

  .s-table .table {
    border-spacing: 0;
    border-collapse: collapse;
    margin-right: 31px;
    width: 100%;
    border-color: #cccccc;
  }

  .table>thead {
    height: 60px;
    background-color: #36a4ff;
    color: #fff;
    font:16px/60px "微软雅黑";
  }

  .table>tbody td {
    padding: 6px;
  }

  .table .td1 {
    font-size: 14px;
    color: #666666;
    text-align: center;
  }
  .baten>button {
    width: 96px;
    height: 32px;
    border-radius: 10px;
    background-color: #36a4ff;
    border: none;
    color: #fff;
    font: 14px/24px "\5FAE\8F6F\96C5\9ED1";
    /* margin-top: 10px; */
  }
</style>